{extend name='public/base' /}
<style type="text/css">

    .banjies {
        color: #ffffff;
        font-size: 14px;
        background-color: #2d8cf0;
        padding: 3px;
        width: 60px;
        border-radius: 5px;
        text-align: center;
        line-height: 24px;
        display: inline-block;
    }

    .tanchu {
        position: absolute;
        top: 170px;
        left: 440px;
        background-color: #fff;
        border: #ccc solid 1px;
        width: 230px;
        border-radius: 10px;
    }
</style>
{block name="content"}

<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="table_id" lay-filter="table_id"></table>
        </div>
    </div>
</div>
<form class="layui-form" action="" lay-filter="form">
    <div class="tanchu" style="display: none;" id="tanchu">
        <div class="layui-form-item">
            <label class="layui-form-label">确认收据：</label>
            <div class="layui-input-block" style="width: 1178px;">
                <table class="layui-hide" id="student_table" lay-filter="student_table"></table>
                <div id="count" style="text-align: right;"></div>
            </div>
        </div>
        <button class="layui-btn" lay-submit="" lay-filter="add">{:__('Submit')}</button>
        <button class="layui-btn" lay-submit="" lay-filter="qx">取消</button>
    </div>

</form>
{/block}

{block name="js"} <!--js处理区-->


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" id="export" class="layui-btn {:node('ExportCenter/export')} layui-btn-sm">导出模板
        </button>
<!--        <button type="button" lay-event="detail"  class="layui-btn {:node('ExportCenter/detail')} layui-btn-sm">导入</button>-->
        <!-- <button type="button" id="import" class="layui-btn {:node('ExportCenter/import')} layui-btn-sm">导入</button> -->
    </div>
</script>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="layui-btn  layui-btn-xs {:node('ExportCenter/add')}" data-title="新增"
       lay-event="add"><i class="layui-icon">&#xe642;</i></a>
</script>

<script type="text/html" id="operationTpl1">
    <a href="javascript:;" class="layui-btn  layui-btn-xs {:node('ExportCenter/edit')}" data-title="编辑"
       lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
</script>
<script>
    layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable', 'laydate', 'upload'], function () {
        var element = layui.element;
        var upload = layui.upload;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var opTable = layui.opTable;
        form.render();
        laydate.render({
            elem: '#time'
            , type: 'date',
            range: '~',
            trigger: 'click'
        });
        var myTables = table.render({
            elem: '#table_id',
            url: "{:url('index')}",
            where: {info_type: 2},
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports'],
            even: true, //开启隔行背景
            id: 'table_id',
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'last'] //自定义分页布局
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limit: 20
                , limits: [10, 20, 30, 50]
            },
            // height: 'full-100',100',
            text: {
                none: '暂无相关数据'
            },
            cols: [[
                {title: '导入时间', field: 'import_time'},
                {title: '成功条数', field: 'success_sum'},
                {title: '失败条数', field: 'fail_sum'},
            ]],
            //  展开的列配置
            openCols: [
                {field: 'desc', title: '描述信息'}
            ],
            done: function (res) {
                layer.closeAll('loading');
            }
        });
        var costType = [];
        var student_table = table.render({
            id: 'student_table',
            // toolbar: '#toolbarDemo1', //开启头部工具栏，并为其绑定左侧模板
            elem: '#student_table',
            cols: [[
                {field: 'merchant_name', title: '商户名称', width: 200,edit:'text'},
                {field: 'berth_number', title: '铺位号', width: 160,edit:'text'},
                {field: 'cost_name', title: '收费名称', width: 230},
                {
                    field: 'amount', title: '金额', width: 100,edit:'text', templet: function (item) {
                        return item.amount
                    }
                },
                {
                    title: '开始时间', field: 'start_time', width: 160, templet: function (item) {
                        return layui.util.toDateString((item.start_time) * 1000)
                    }
                },
                {
                    title: '开始时间', field: 'end_time',edit:'text', width: 160, templet: function (item) {
                        return layui.util.toDateString((item.end_time) * 1000)
                    }
                },
                {
                    title: '是否匹配', field: 'success', width: 160, templet: function (item) {
                        if(item.success==1){
                            return '是'
                        }else {
                            return "<a class=\"layui-btn layui-btn-xs\" >失败</a>"
                        }

                    }
                },
                // {templet: '#operationTpl1', fixed: 'right', align: 'center', width: 150, title: '操作'}
            ]],
            data: costType
        });
        //导出
        $('#export').on('click', function () {
            var url = "{:url('export')}";
            window.open(url);
        });
        //导入
        upload.render({
            elem: '#import',
            url: "{:url('import')}",
            accept: 'file', //普通文件
            multiple: false,
            exts: 'xlsx|xls', // 限制文件类型为 xlsx或xls
            done: function (data) {  // 成功的回调函数

                // console.log('弹层该出现了')
                document.getElementById("tanchu").style.display = "block";
                var param = data.data.data
                console.log(param)
                student_table.reload({data: param});
                $('#count').html('共'+data.data.count+'条')
            }
            , error: function (index, upload) {  // 失败的回调函数

            }
        });
        //导出时阻止页面刷新
        $(".layui-form").submit(function (e) {
            e.preventDefault();
        })
        /**
         * 监听单行工具操作
         */
        table.on('tool(student_table)', function (obj) {
            var data = obj.data;
            var _id = parseInt(data.id);
            var layEvent = obj.event;
            console.log(2222)
            if (layEvent === "edit") {
                lucky.CreateOpenForm("缴费详情", "{:url('detail')}?id=" + _id);
                return false;
            }
        });
        table.on('toolbar(table_id)', function(obj){
            console.log('打印',obj.event)
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            if(obj.event==="detail"){
                lucky.CreateOpenForm("导入","{:url('detail')}");
                return false;
                // adminAdd
            } 
        });
        /**
         * 关键词搜索树
         */
        /**
         * 关键词搜索树
         */
        form.on('submit(search)', function (obj) {
            lucky.CreateSearch(obj.field);
            return false;
        });
    });

</script>

{/block}
